<template>
  <div class="home">
    
    <!-- <h1>首页</h1> -->
    <!-- 搜索 -->
    <van-search
      class="home-search"
      shape="round"
      placeholder="请输入搜索关键词"
      @focus="$router.push('/search')"
    >
      <template v-slot:left>
        <img class="img-youping" src="@/assets/image/youping.png" />
      </template>
    </van-search>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" @change="onChange" :autoplay="3000">
      <van-swipe-item v-for="ban in banner" :key="ban.id">
        <router-link :to="ban.url" tag="div">
          <img class="imgban" :src="ban.pic" />
        </router-link>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/3</div>
      </template>
    </van-swipe>

    <!-- 宫格 -->
    <van-grid square v-if="result" class="grid">
      <van-grid-item
        v-for="item in result.menus"
        :key="item.id"
        :icon="item.pic"
        :text="item.name"
        :url="item.url"
      />
    </van-grid>

    <!-- 通知 垂直滚动 -->
    <van-notice-bar
      v-if="result"
      class="scroll-notice"
      background="#ffffff"
      :scrollable="false"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="2000"
        :show-indicators="false"
      >
        <van-swipe-item
          class="notice-items"
          v-for="notice in result.roll"
          :key="notice.id"
        >
          <div class="noticeItem">
            <span class="noticetext">{{ notice.info }}</span>
            <i class="fa fa-angle-right"></i>
          </div>
        </van-swipe-item>
      </van-swipe>

      <template v-slot:left-icon>
        <img
          class="notice-left-icon"
          src=""
        />
      </template>
    </van-notice-bar>

    <!-- 快速选择 -->
    <!-- 小标题分类列表 -->
    <list-title class="list-Title">
      <template #title>
        <div><b class="title-left">快速选择</b><span></span></div>
      </template>
      <template #moreRight>
        <!-- 跳转更多 -->
        <router-link to="/category" tag="div">
          更多
          <i class="fa fa-angle-right"></i>
        </router-link>
      </template>
    </list-title>
    <!-- 快速选择 -->
    <!-- Rotation轮播图  -->
    <rotation :fastList="fastList"></rotation>

    <!-- 精品推荐 -->
    <!-- 小标题分类列表 -->
    <list-title class="list-Title">
      <template #title>
        <div><b class="title-left">精品推荐</b><span></span></div>
      </template>
      <template #moreRight>
        <!-- 跳转更多 -->
        <router-link to="/category" tag="div">
          更多
          <i class="fa fa-angle-right"></i>
        </router-link>
      </template>
    </list-title>
    <bast-banner :bastBanner="bastBanner"></bast-banner>
    <bast-list :bastList="bastList"></bast-list>

    <!-- 热门榜单 -->
    <hot-list class="hot" :likeInfo="likeInfo"></hot-list>
    
    <!-- 促销商品 -->
    <!-- 小标题分类列表 -->
    <list-title class="list-Title">
      <template #title>
        <div><b class="title-left">促销商品</b><span></span></div>
      </template>
      <template #moreRight>
        <!-- 跳转更多 -->
        <router-link to="/category" tag="div">
          更多
          <i class="fa fa-angle-right"></i>
        </router-link>
      </template>
    </list-title>
    <!-- 促销商品 -->
    <div class="promotion">
        <ul>
          <router-link
            tag="li"
            :to="{ path: '/detail', query: { id: benefits.id } }"
            v-for="benefits in benefit"
            :key="benefits.id"
          >
            <div class="card_img">
              <img :src="benefits.image" alt="" />
            </div>
            <div class="card_text">
              <p class="card_text_text">{{ benefits.store_name }}</p>
              <div class="card_text_price">
                <span>促销价：￥{{ benefits.price }}</span>
              </div>
              <div class="card_text_vip">
                <p>日常价{{ benefits.ot_price }}</p>
                <p>仅剩{{ benefits.stock }}</p>
              </div>
            </div>
          </router-link>
        </ul>
      </div>


  </div>
</template>

<script>
import Rotation from "@/components/Rotation.vue";
import ListTitle from "@/components/ListTitle.vue";
import BastBanner from "@/components/BastBanner"; //精品推荐
import BastList from "@/components/BastList"; //精品推荐list
import HotList from "@/components/HotList.vue"; //热门榜单
 // 促销商品

export default {
  name: "",
  components: {
    Rotation,
    ListTitle,
    BastBanner, //精品推荐
    BastList, //精品推荐
    HotList,  //热门榜单
  },
  data() {
    return {
      current: 0, //指示点位置
      banner: [], //轮播图片数据
      result: null,
      fastList: [], //快速选择分类列表
      bastBanner: [], //精品推荐-轮播图
      bastList: [], //精品推荐-内容
      likeInfo: [], // 热门榜单
      benefit:[], //促销商品
    };
  },
  created() {
    // console.log("获取hash值 #/ ==>",window.location.hash);
    this.axios.get("/index").then((re) => {
      // console.log("Home-index=>",re);
      this.banner = re.banner;
      this.result = re;
      this.fastList = re.info.fastList;
      // console.log("快速选择=> ", this.fastList);

      //精品推荐-轮播图
      this.bastBanner = re.info.bastBanner;
      
      //精品推荐-内容
      this.bastList = re.info.bastList;

      // 热门榜单
      this.likeInfo=re.likeInfo;
      // console.log("likeInfo=> ",re.likeInfo);

      // 促销商品
      this.benefit=re.benefit;

    });
  },

  //
  methods: {
    // 轮播图-指示点下标
    onChange(index) {
      this.current = index;
    },
  },
  
};
</script>
<style lang="less" >
.home-search {
  .img-youping {
    width: 50px;
  }
}

.imgban {
  width: 100%;
  height: 190px;
  display: block;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #fff;
  padding: 2px 5px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.1);
}
//grid宫格
.grid {
  .van-icon__image {
    width: 45px;
    height: 45px;
  }
}

// 通知栏  垂直滚动
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.scroll-notice {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-shadow: 0px 0px 10px #eee;
  .notice-left-icon {
    width: 70px;
  }
  .van-notice-bar__content.van-ellipsis {
    width: 100%;
  }

  // 文字与icon
  .noticeItem {
    // width: 100%;
    display: flex;
    padding-left: 20px;
    color: #222;
    justify-content: space-between;
    align-items: center;
    .noticetext {
      flex: 1;
    }
    i.fa-angle-right {
      display: block;
      width: 10px;
      font-size: 20px;
      color: #919191;
    }
  }
}

//小标题分类列表
.list-Title {
  .title-left {
    font-weight: bold;
    // text-shadow: 0.1px 0px 1px #000000;
    font-size: 16px;
    padding-right: 10px;
    // font-family: "黑体";
  }
  i {
    font-size: 20px;
    color: #919191;
  }
}

// 促销商品 
.promotion {
  padding: 0 16px;
  li {
    display: flex;
    margin: 24px 0;
    position: relative;
    .card_img {
      img {
        width: 90px;
        height: 90px;
      }
    }
    .card_text {
      overflow: hidden;
      margin-left: 16px;
      .card_text_text {
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .card_text_price {
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-top: 30px;
        span {
          background-color: #fc4141;
          color: white;
          padding: 5px 10px;
          border-radius: 20px 0 20px 0;
        }
      }
    }
    .card_text_vip {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      p {
        font-size: 12px;
        font-weight: 600;
        margin-right: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: rgb(162, 162, 162);
        &:nth-child(1) {
          text-decoration: line-through;
        }
      }
    }
  }
}

</style>
